<template>
	<view class="wrap">
		<!-- <view :style="{'color':currSys == 'stage' ? uniScss.stageColor : uniScss.qyColor}">{{title}}</view> -->
		<custom-nav-sq-xcx :isBack="true" :hasFixedFlag="true" bgColor="usuallyBgQy">
			<block slot="content">企业入驻</block>
		</custom-nav-sq-xcx>
		<create-qy-head :modWrapIndex="modWrapIndex">
			<view class="modItem">
				<view class="modTit">企业信息<text class="must">(必填)</text></view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">所在省市县</view>
					<view class="selArea">
						<select-area
							currPage="selGrid"
							:specFlag="specFlag" 
							:province="provName" 
							:showAreaFlag="showAreaFlag" 
							:city="cityName" 
							:country="countryName" 
							:isHasSelFlag="isHasSelFlag"
							@toggleAreaPicker="toggleAreaPicker"
							@selected="selectCity"
						></select-area>
						<view class="iconfont icon-sanjiao"></view>
					</view>
				</view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">所在乡镇/街道</view>
					<view class="selArea street" @tap="goSelTown">
						<view :class="[selTownFlag ? 'hasSel' : '']">{{townName}}</view>
						<view class="iconfont icon-gengduo"></view>
					</view>
				</view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">企业名称</view>
					<input class="modInp" type="text" v-model="qyName" placeholder="请输入企业名称(30字内)" maxlength="30" placeholder-class="holderInp"/>
				</view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">企业地址</view>
					<input class="modInp" type="text" v-model="qyAddress" placeholder="请输入企业地址(40字内)" placeholder-class="qyholderInp" maxlength="40"/>
				</view>
				<view class="modCon">
					<view class="conTit hasMargBot">上传营业执照<text class="tips">(注:营业执照不得有遮挡,保证图片清晰)</text></view>
					<view class="conItem">
						<upload-image :mainImg="mainImg" :pathName="pathNameYyzz" :mainImgEdit="getCloudFilePath(mainSucc_yyzz)" :currType="currType" clickOpt="upYyzz" :radius="radius" @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"></upload-image>
						<view class="iconfont icon-selectPic"></view>
						<view class="upTips posAbso lbzero">请上传/拍摄营业执照</view>
					</view>
				</view>
				<view class="modCon">
					<view class="conTit hasMargBot">上传企业Logo<text class="tips">(注企业Logo不得有遮挡,保证图片清晰)</text></view>
					<view class="conItem">
						<upload-image :mainImg="mainImg" :pathName="pathNameLogo" :mainImgEdit="getCloudFilePath(mainSucc_logo)" :currType="currType" clickOpt="upYyzz" :radius="radius" @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"></upload-image>
						<view class="iconfont icon-upLogo"></view>
						<view class="upTips posAbso lbzero">请上传企业Logo</view>
					</view>
				</view>
			</view>
			<view class="modItem">
				<view class="modTit">企业联系人<text class="must">(必填)</text></view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">联系人姓名</view>
					<input class="modInp" type="text" v-model="lxrName" placeholder="请输入联系人姓名" maxlength="6" placeholder-class="qyholderInp"/>
				</view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">联系人电话</view>
					<input class="modInp" type="tel" v-model="lxrTel" maxlength="11" placeholder="请输入联系人手机号码" placeholder-class="qyholderInp"/>
				</view>
			</view>
			<view class="modItem">
				<view class="modTit">企业管理员<text class="must">(必填)</text></view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">管理员姓名</view>
					<input class="modInp" type="text" :disabled="isDisabledFlag_acc" v-model="adminName" placeholder="请输入管理员姓名" maxlength="6" placeholder-class="holderInp"/>
				</view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">管理员账号:</view>
					<input class="modInp" type="text" :disabled="isDisabledFlag_acc" maxlength="12" v-model="phoneNum" placeholder="字母或数字组成12位以内" placeholder-class="holderInp"/>
				</view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">账号密码</view> 
					<input class="modInp" type="text" disabled v-model="initPass" placeholder="请输入密码(初始密码123456)" maxlength="20"/>
				</view>
				<view class="notes">1.管理员账号由英文字母或数字组成,如若为手机号且不能和您当前App登录账号绑定手机相同</view>
				<view class="notes">2.账号初始密码为123456,如需修改可登录和心云企业后台管理系统修改</view>
			</view>
			<view class="modItem">
				<view class="modTit">法人资质<text class="must">(必填)</text></view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">法人姓名</view>
					<input class="modInp" type="text" v-model="frName" disabled placeholder="请上传身份证正面进行设别" maxlength="6" placeholder-class="qyholderInp"/>
				</view>
				<view class="modCon spaceBet currHei">
					<view class="conTit">身份证号</view>
					<input class="modInp" type="number" disabled v-model="frSfz" placeholder="请上传身份证正面进行设别" placeholder-class="qyholderInp"/>
				</view>
				<view class="modCon">
					<view class="conTit hasMargBot">身份证照片<text class="tips">(注:身份证不得有遮挡,保证身份证清晰)</text></view>
					<view class="innerConItem spaceBet">
						<view class="conItem">
							<upload-image :mainImg="mainImg" :pathName="pathNameID" :mainImgEdit="getCloudFilePath(mainSucc_front)" :currType="currType" clickOpt="upZm" :radius="radius" @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"></upload-image>
							<image class="iCardImg" :src="getQyStaticFilePath('iCard.png')"></image>
							<view class="upTips posAbso lbzero">请上传/拍摄身份证正面</view>
						</view>
						<view class="conItem">
							<upload-image :mainImg="mainImg" :pathName="pathNameID" :mainImgEdit="getCloudFilePath(mainSucc_beh)" :currType="currType" clickOpt="upBm" :radius="radius" @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"></upload-image>
							<image class="iCardImg" :src="getQyStaticFilePath('iCardBack.png')"></image>
							<view class="upTips posAbso lbzero">请上传/拍摄身份证反面</view>
						</view>
					</view>
				</view>
			</view>
		</create-qy-head>
		<view class="btnGroupBot">
			<button class="comBtn qyDis" :disabled="btnDisabFlag">{{btnTit}}</button>
		</view>
	</view>
</template>

<script>
	//import uniScss from '@/uni.scss';
	//const app = getApp();
	import CreateQyHead from './components/CreateQyHead.vue';
	export default {
		components:{
			CreateQyHead
		},
		data() {
			return {
				currSys:'stage',
				provName : '请选择省',
				cityName : '市',
				countryName : '县/区',
				townName:'请选择所在乡镇/街道',
				selTownFlag:false,
				selGridFlag:false,
				specFlag : false,
				isHasSelFlag:false,
				showAreaFlag:false,
				countyCode:'',
				
				
				radius:20,
				lxrName:'',
				lxrTel:'',
				qyName:'',
				qyAddress:'',
				frName:'',
				frSfz:'',
				mainImg:'',
				currType:'',
				pathNameID:'qySys/createQy/idCard',
				pathNameYyzz:'qySys/createQy/yyzz',
				pathNameLogo:'qySys/createQy/logo',
				mainSucc_front:'',
				mainSucc_beh:'',
				mainSucc_yyzz:'',
				mainSucc_logo:'',
				btnDisabFlag:false,
				btnTit:'提交审核',
				isDisabledFlag_acc:false,//审核不通过时账号不能编辑 为true
				initPass:'123456',
				//navHeight:app.globalData.navHeight,
				modWrapIndex:100,
				currPageType:'',
			}
		},
		// computed: {
		// 	uniScss() {
		// 	  return uniScss;
		// 	}
		// },
		onLoad(options){
			// this.currPageType = options.currType;//add fix
			// if(this.currPageType == 'fix'){
			// 	this.currType = 'edit';
			// 	this.loadSqDet();
			// }else{
			// 	this.loadFlag = false;
			// }
		},
		methods: {
			
			toggleAreaPicker(isShow){
				this.modWrapIndex = 101;
				this.showAreaFlag = isShow;
				if(isShow){
					this.modWrapIndex = 101
				}else{
					this.modWrapIndex = 100
				}
			},
			upImgIng(){
				this.btnTit = '上传中...';
				this.btnDisabFlag = true;
			},
			uploadSingleImg(e){
				this.btnTit = '提交审核';
				this.btnDisabFlag = false;
				if(e.clickOpt == 'upZm'){
					this.mainSucc_front = e.succSrc;
					this.verifyIDCard(e.clickOpt);
				}else if(e.clickOpt == 'upBm'){
					this.mainSucc_beh = e.succSrc;
					this.verifyIDCard(e.clickOpt);
				}else if(e.clickOpt == 'upFm'){
					this.mainSucc_fm = e.succSrc;
				}else if(e.clickOpt == 'upYyzz'){
					this.mainSucc_yyzz = e.succSrc;
				}else if(e.clickOpt == 'upLogo'){
					this.mainSucc_logo = e.succSrc;
				}
			},
			goSelTown(){
				if(this.countyCode == ''){
					this.util.showToast('请选择省市县');
					return;
				}
				let townName = this.townName != '请选择所在乡镇/街道' ? this.townName : '';
				uni.navigateTo({
					url:'/pages/subSqMine/createSq/townList?countyCode=' + this.countyCode + '&townName=' + townName
				})
			},
			selectCity(e){
				this.showAreaFlag = false;
				this.isHasSelFlag = e.isHasSelFlag;
				this.provName = e.province;
				this.cityName = e.city;
				this.countryName = e.country;
				this.countyCode = e.countyCode;
				this.modWrapIndex = 100
				this.initParams();
			},
			initParams(){
				this.townName = '请选择所在乡镇/街道';
				this.selTownFlag = false;
				this.gridName = '请选择负责网格';
				this.selGridFlag = false;
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: #EFF3F6;
	}
</style>
<style lang="scss" scoped>
	.wrap{
		padding-bottom: 120rpx;
	}
	.modItem{
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		background: #fff;
		padding: 0 20rpx 20rpx;
		.notes{
			font-size: $font-size24;
			color: $pss-qy-main;
			padding: 10rpx 0;
		}
		.modCon{
			margin-bottom: 10rpx;
			position: relative;
			.conItem{
				width: 310rpx;
				height:200rpx;
				background: #faf9fe;
				border-radius: 20rpx;
				position: relative;
				display: flex;
				justify-content: center;
				line-height: 180rpx;
				.samePar{
					border-radius: inherit;
				}
				.iCardImg{
					width: 120rpx;
					height: 120rpx;
					margin-top: 20rpx;
				}
				.iconfont{
					font-size: 80rpx;
					color: lighten($pss-qy-main, 30%);
					&.icon-upLogo{
						font-size: 68rpx;
					}
				}
				.upTips{
					height:50rpx;
					line-height: 50rpx;
					width: 100%;
					background: $pss-qy-main;
					color: #fff;
					text-align: center;
					font-size: $font-size24;
					border-radius: 0 0 20rpx 20rpx;
				}
			}
			.conTit{
				width: 190rpx;
				line-height: 90rpx;
				height: 100%;
				font-size: $font-size28;
				color: $qy-main2;
				flex-shrink: 0;
				.tips{
					font-size: $font-size24;
					color: $pss-text-colora;
					margin-left: 10rpx;
				}
				&.hasMargBot{
					width: 100%;
				}
				&.specCol{
					color: $pss-text-colora;
				}
			}
			.selArea{
				flex: 1;
				display: flex;
				align-items: center;
				margin-right: 15rpx;
				line-height: 90rpx;
				position: relative;
				/deep/ .title{
					color: $qy-main2;
					font-size: 28rpx;
					position: absolute;
					top: 0;
					right: 40rpx;
					text-align: right;
				}
				/deep/ .title.noSel {
					color: $qy-mainb;
				}
				.icon-sanjiao{
					color: $qy-mainb;
					font-size: 38rpx;
					position: absolute;
					right: 0;
				}
				&.street{
					text-align: right;
					justify-content: flex-end;
					font-size: 28rpx;
					color: $qy-mainb;
					.hasSel{
						color: $qy-main2;
					}
					.icon-gengduo{
						font-size: 24rpx;
						margin-left: 15rpx;
					}
				}
			}
			.modInp{
				flex: 1;
				height: 100%;
				font-size: $font-size28;
				color: $qy-main2;
				text-align: right;
				padding-right: 15rpx;
			}
			&.currHei{
				height: 90rpx;
				border-bottom: 1rpx solid #f1f1f1;
			}
		}
		.modTit{
			height: 90rpx;
			line-height: 90rpx;
			font-size: $font-size32;
			color: $qy-main2;
			font-weight: bold;
			.must,
			.notMust{
				font-size: $font-size26;
				font-weight: normal;
				margin-left: 10rpx;
			}
			.must{
				color: $pss-qy-main;
			}
			.notMust{
				color: $pss-text-color8;
			}
		}
	}
</style>
